在剛開始學寫程式時，有個不成文的習慣：先讓螢幕顯示出 Hello World 這串文字，代表程式有在正常運作、讓新手知道自己已經能正式運行一個程式起來了，可能就會更有信心面對接下來的程式學習。這篇文章就是想讓一個新手，也能在五分鐘內就能讓螢幕顯示 Hello World 這串文字。

目標

• 出現 hello world
• 文字變紅，變大
• 點擊按鈕，顯示彈出視窗

請注意，本系列文可能不會進行詳細的教學，但會提醒該注意的地方，以及盡量附上學習資源。

一、寫程式的環境

一般在打報告時，我們會打開文書處理軟體，例如 Office Word 或是 Google Docs。而在寫程式呢？則是會打開文字編輯器(Text Editor)、或是整合式開發環境(IDE)。

在關卡〇，為了快速寫出 Hello World，我們先不深入研究如何設定開發環境，而是直接使用 Codepen 這個線上服務。Codepen 是一個專門讓使用者編寫 HTML、CSS、JavaScript，用來快速展示網頁的服務。

請參考以下教學資源，了解 Codepen 如何使用

• CodePen 教學 - 將你的程式碼分享給別人 - YouTube
• 十分鐘快速入門上手 CodePen（有中文翻譯） | 是 Ray 不是 Array

二、Hello World 程式碼

請依照這個 Codepen 的程式碼，也建立出自己的一個 Codepen，並將程式碼貼上

• https://codepen.io/ayugioh2003/pen/YzLZyYZ?editors=1111

// HTML
<div>Hello World!</div>
<button>Click Me</button>

// CSS
div {
  color: red;
  font-size: 108px;
}

// JavaScript
const button = document.querySelector('button')
button.addEventListener('click', alertSomething)

function alertSomething() {
  window.alert('哈囉你好嗎')
}

檢核點：當貼上這些程式碼後，需要得到以下的效果

• 出現 hello world
• 文字變紅，變大
• 點擊按鈕，顯示彈出視窗

我將在後續文章解釋這些程式碼的意義

小結

今天為了寫出 Hello World，介紹了 Codepen 線上服務能快速產生出一個網頁。也寫了一個 Hello World 頁面，能快速體驗 HTML、CSS、JavaScript 的用途。明天將從 HTML 的程式碼開始介紹。